<template>
	<view class="container">
		<!-- 审批列表 -->
		<u-navbar :is-back="true" :border-bottom="flase" title="审批列表" title-color="#fff" :title-size="40"
			backIconColor="#fff">
			<!-- 搜索 -->
			<view class="headFeatures" slot="correctingList">
				<u-button @click="show = true" :hair-line="false" class="uButton">
					<u-icon name="plus-circle-fill" color="#898CEA" size="45" style="margin-right: 5px;"></u-icon>
					<text>筛选</text>
				</u-button>
				<view>
					<u-icon name="reload" color="#2979ff" size="40" class="resetIcon"
						:class="refresh?'resetIconRotate':''" @click="resetIcon()"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="content" v-show="yesOrNo">
			<template v-if="dataList.length==0">
				<view class="empty">
					<u-empty text="审批列表为空" mode="list" v-show="show2"></u-empty>
				</view>
			</template>
			<template v-else>
				<!-- content_box无金额时，行间距为75rpx,有金额时，行间距为60rpx -->
				<view class="content_box"
					:class="item.apply.app_id==4||item.apply.app_id==5||item.apply.app_id==13?'content_box2':''"
					@click="approvalDetail(item)" v-for="(item,index) in dataList" :key="index">
					<view class="box">
						<!-- <view class="lable"
							:class="[item.status== '0' ? 'color3': '', item.status=='1'||item.status== '2' ? 'color2': '',item.status=='-1'? 'color1': '']">
							{{item.status | getStatus(item.status)}}
						</view> -->
						<view class="lable"
							:class="[item.status== '0' ? 'color3': '', item.status=='1'? 'color2': '',item.status=='-1'? 'color1': '',item.status== '2' ? 'color4': '',item.status== '3' ? 'color2': '']">
							{{item.status | getStatus(item.status)}}
						</view>
						<view class="title">
							{{item.apply.title}}
						</view>
						<view class="time">
							申请人：{{item.apply.user_name}}
						</view>
						<view class="time">
							审批类型：
							<text v-show="item.apply.app_id==4">财务申请</text>
							<text v-show="item.apply.app_id==5">财务报销</text>
							<text v-show="item.apply.app_id==13">财务上报</text>
							<text v-show="item.apply.app_id==7">业务申请</text>
							<text v-show="item.apply.app_id==8">业务派发</text>
							<text v-show="item.apply.app_id==16">请假申请</text>
							<text v-show="item.apply.app_id==10">周报</text>
							<text v-show="item.apply.app_id==11">月报</text>
							<text v-show="item.apply.app_id==12">年报</text>
						</view>
						<!-- app_id - 4、5、13显示 - 判断是否显示金额 -->
						<view class="time" v-if="item.apply.app_id==4||item.apply.app_id==5||item.apply.app_id==13">
							金额：{{item.apply.money}}
						</view>
						<view class="time">
							申请时间：{{item.apply.created_at}}
						</view>

					</view>
				</view>
			</template>
		</view>
		<u-empty v-show="!yesOrNo" text="暂无审批!" mode="favor" font-size="25" icon-size="150"></u-empty>

		<!-- 弹出层 - 部门选择 - 文件选择 -->
		<u-popup v-model="show">
			<u-navbar :is-back="false" :border-bottom="false" title="筛选要求" title-color="#fff" :title-size="40">
			</u-navbar>
			<!-- 全部按键 -->
			<view class="btnSet">
				<u-divider>状态选择</u-divider>
				<view class="popupView">
					<button v-for="(item,index) in statusButton" :key="item.id"
						:class="index==chooseId.id-1?'chooseButton':''" @click="btnPopup1(item)">{{item.name}}</button>
				</view>
				<u-divider>审批名称搜索</u-divider>
				<view class="search searchFile1">
					<u-input v-model="keyWord" :clearable="true" placeholder="请输入搜索内容" placeholder-style="paddingLeft:0"
						:custom-style="uInput1" :trim="true" />
					<u-button :disabled="isDisabled" @click="searchIcon">搜索</u-button>
				</view>
				<view class="subBtn">
					<button @click="resetBtn">重 置</button>
					<button @click="determine">确 认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				id: "",
				refresh: false, //顶部刷新按钮 - 动画
				show: false, //筛选弹出框
				yesOrNo: true, //搜索为空时
				chooseId: "", // 状态样式改变
				keyWord: "", //输入框的值
				show2: true, //为空时的显示
				statusButton: [ //状态选项按钮
					{
						id: "1",
						name: "待审批",
						status: 0
					}, {
						id: "2",
						name: "已驳回",
						status: -1
					}, {
						id: "3",
						name: "已通过",
						status: 1
					}, {
						id: "4",
						name: "已完成",
						status: 3
					},
				],

				isDisabled: true, //控制搜索按钮的禁用与否
				uInput1: { //输入框的样式
					width: "80%",
					padding: "0 25rpx",
				},

			}
		},
		filters: {
			getStatus(key) {
				let status = '';
				switch (key) {
					case 0:
						status = "待审批"
						break
					case 1:
						status = "已通过"
						break
					case -1:
						status = "已驳回"
						break
					case 2:
						status = "审核中"
						// status = "已通过"
						break
					case 3:
						status = "已完成"
						break
				}
				return status
			}
		},
		methods: {
			getDpplyDta() { //接口
				this.dataList = []
				uni.showLoading({
					title: '正在加载...'
				})
				this.$http(this.$api.businessList, {
					id: this.id,
					title: this.keyWord, //输入框
					status: this.chooseId.status || 0 //状态
				}).then(res => {
					// console.log(res, '列表');
					this.show = false
					if (res.code == 0) {
						this.dataList = res.data
						this.refresh = false //刷新动画
						uni.hideLoading()
						uni.showToast({
							title: "刷新成功",
							icon: 'none',
							duration: 800
						})
					} else {
						this.refresh = false //刷新动画
						this.dataList = res.data
						uni.showToast({
							title: "刷新失败",
							icon: 'none',
							duration: 800
						})
					}
					if (res.data.length == 0) {
						this.yesOrNo = false
					} else {
						this.yesOrNo = true
					}
					uni.stopPullDownRefresh()
				})
			},
			approvalDetail(item) { //跳转驳回/通过审批页
				let item1 = JSON.stringify(item)
				// console.log(item1, '打印每一条申请的所有内容'); //打印每一条申请的所有内容
				uni.navigateTo({
					url: `./approvalDetail?item=${item1}`
				})
			},
			btnPopup1(item) { //弹出框 状态选择按钮
				this.chooseId = item
				console.log(item, 'item');
			},
			searchIcon() { //搜索按钮
				this.getDpplyDta()
			},
			// 已反驳 -1 ，待审核 0，已通过 1，
			determine() { //弹出框 确认按键
				this.show = false
				this.getDpplyDta()
			},
			resetBtn() { //弹出框 重置按键
				this.chooseId = ""
				this.keyWord = ""
				this.yesOrNo = true
				this.getDpplyDta()
			},
			resetIcon() { //列表顶部重置
				this.refresh = true
				this.yesOrNo = true
				this.chooseId = ''
				this.keyWord = ""
				this.getDpplyDta()
			},
		},
		watch: {
			keyWord() { //监视搜索框的值，空时，隐藏显示区
				if (this.keyWord == "") {
					this.isDisabled = true
					this.getDpplyDta()
				} else if (this.keyWord != "") {
					this.isDisabled = false
				}
			}
		},
		onLoad(e) {
			this.id = e.id //八分区的id
		},
		onShow() {
			this.getDpplyDta()
		},
		onPullDownRefresh() { //下拉刷新
			this.getDpplyDta()
		},
	}
</script>

<style>
	.empty {
		margin-top: 200rpx;
	}

	.content {
		padding: 0px 15px;
		font-size: 14px;
		margin-top: 130rpx;
		padding-bottom: 45rpx;
	}

	.content_box {
		box-shadow: 0px 0px 6px #DCDCDC;
		border-radius: 10px;
		padding: 15px;
		line-height: 75rpx;
		overflow: hidden;
		width: 99%;
		margin: 20px auto;
		position: relative;
	}

	.content_box2 {
		line-height: 60rpx;
	}

	.box {
		height: 280rpx;
	}

	.time {
		font-size: 13px;
		color: #666;
	}

	.lable {
		width: 310rpx;
		height: 80rpx;
		color: #fff;
		transform: rotate(-42deg);
		position: absolute;
		top: 249rpx;
		left: 455rpx;
		z-index: -99;
		text-align: center;
		line-height: 70rpx !important;
	}

	.color1 {
		color: #fff;
		background-color: red;
	}

	.color2 {
		color: #fff;
		background-color: limegreen;
	}

	.color3 {
		color: #fff;
		background-color: skyblue;
	}

	.color4 {
		color: #fff;
		background-color: orange;
	}

	.submit {
		width: 200px;
		border-radius: 40px;
		border: 1px solid blue;
		color: blue;
		background-color: rgba(153, 204, 255, 0.3);
	}

	.container {
		position: relative;
		height: 98vh;
	}

	.pos {
		position: absolute;
		bottom: 0;
		left: 176rpx;
	}

	.title {
		font-weight: bold;
		font-size: 20px;
	}

	.searchView {
		padding: 25rpx 20rpx;
		box-shadow: 0 0 5px #c8c9cc;
		position: fixed;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.headFeatures {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 5rpx 15rpx #ccc;
		background-color: #fff;
	}

	.headFeatures>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.uButton {
		/* width: 22% !important; */
		display: block;
	}

	.uButton>button {
		border: none !important;
		margin-top: 3px;
	}

	.uButton2 {
		margin-right: 30rpx;
		width: 200rpx;
	}

	.resetIcon {
		/* 顶部刷新按钮 */
		margin-right: 20px;
	}

	.resetIconRotate {
		/* 刷新功能样式 */
		transition: all 0.8s;
		transform: rotate(720deg);
	}

	/* 点击 弹出左侧模块 */
	.btnSet {
		height: calc(100vh - 170rpx);
		padding: 10px;
		width: 500rpx;
		position: relative;
	}

	.popupView {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap
	}

	.popupView>button {
		color: #82848a;
		width: 48%;
		margin: 0;
		margin-bottom: 10px;
		background-color: #f4f4f5;
	}

	u-divider /deep/ view {
		/* 分隔线 */
		margin: 40rpx 0;
	}

	.btnSet u-divider:first-child view {
		margin-top: 0px;
	}

	.chooseButton {
		/* 按钮被选中后的样式 */
		background: linear-gradient(to right, #9C6CEE, #78AAE8) !important;
		color: #fff !important;
	}

	.search {
		/* 弹出框内 搜索框 */
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #dfe2e55e;
		border-radius: 15px;
		overflow: hidden;
		height: 30px;
		line-height: 30px;
	}

	u-input {
		width: 78%;
	}

	u-button {
		width: 20%;
	}

	button {
		font-size: 25rpx !important;
	}

	.search button {
		display: block;
		color: #fff !important;
		background: linear-gradient(to right, #9C6CEE, #78AAE8) !important;
	}

	.subBtn {
		/* 弹出框底部 重置确认按键 */
		display: flex;
		justify-content: space-between;
		position: absolute;
		right: 0;
		bottom: 60rpx;
		width: 100%;
		padding: 0 15rpx;
	}

	.subBtn>button {
		width: 45%;
		padding: 2rpx 0;

	}

	.subBtn>button:last-child {
		color: #fff;
		background: linear-gradient(to right, #9C6CEE, #78AAE8);
	}
</style>
